<template>
	<div class="min-minwidth" id="loginview" @keyup.enter="loginfun">
		<img class="footerimg" src="@/assets/logoh.png" alt="" />
		<div class="logoactive marginAuto">
			<div class="logoactive-logo ">
				<img class="logoimage" src="@/assets/logo.png" alt="" />
			</div>
		</div>
		<div class="welcome marginAuto">欢迎来到豫图网</div>
		<div class="taglogin marginAuto">
			<div class="tagloginmain flex">
				<div class="taglogineach curpoin" @click="formdata.isveritag = 0">
					<span :class="formdata.isveritag == 0 ? 'taglogineachtxt':''">验证码</span>
					<p v-show="formdata.isveritag == 0" class="taglogineachac mainbg"></p>
				</div>
				<div class="taglogineach curpoin" @click="formdata.isveritag = 1">
					<span :class="formdata.isveritag == 1 ? 'taglogineachtxt':''">密码登录</span>
					<p v-show="formdata.isveritag == 1" class="taglogineachac mainbg"></p>
				</div>
			</div>
		</div>
		<div class="from">
			<div class="from-each">
				<div class="from-eachinput">
					<el-input class="from-eachinput" maxlength="11" v-model="formdata.mobile" placeholder="手机号"></el-input>
				</div>
			</div>
			<div class="from-each" v-if="formdata.isveritag == 0">
				<div class="from-eachinput">
					<el-input class="from-eachinput" type="text" v-model="formdata.veri" placeholder="验证码"></el-input>
					<div class="veri" style="top:4px;">
						<div class="verimain curpoin">
							<span class="each-code-y" v-show="!istime" @click="vericlickfun()">发送验证码</span>
							<span class="each-code-j" v-show="istime">{{times}}s</span>
						</div>
					</div>
				</div>
			</div>
			<div class="from-each" v-if="formdata.isveritag == 1">
				<div class="from-eachinput">
					<el-input class="from-eachinput" type="password" v-model="formdata.password" placeholder="密码"></el-input>
				</div>
			</div>
		</div>
		<div class="goregis marginAuto curpoin" @click="$router.push('/reg')"><span>还没有账号，</span><span class="mainColor">去注册</span></div>
		<div class="btneach curpoin">
			<el-button class="btnlogin mainbg" @click="loginfun">立即登录</el-button>
		</div>
		<div class="findpass marginAuto mainColor curpoin" @click="$router.push('/findpass')">忘记密码</div>
		<div style="font-size: 9px;margin-top: 120px;text-align: center;color: #b9b9b9;letter-spacing: 1px;">{{ apifun.version }}</div>
		<!-- popup -->
		<div class="popup" v-if="formdata.islogincode">
			<div class="popupbg" @click="formdata.islogincode=false"></div>
			<div class="popupblock">
				<div class="lcodetitle">登录码</div>
				<div class="lcodedec">请向您的直属申请登录验证码</div>
				<div class="lcodemsg" style="margin-top:40px;">
					<el-input class="lcodemsg" type="text" v-model="formdata.lcodetxt" placeholder="请输入"></el-input>
				</div>
				<div class="locdebtn flex">
					<div class="locdebtneach curpoin" @click="formdata.islogincode=false" style="background-color:#999999;">取消</div>
					<div class="locdebtneach curpoin mainbg" @click="lcodefun()">确认</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HomeView',
		components: {},
		data(){
			return {
				istime:false,
				times:60,
				formdata:{
					isveritag:0, // 0验证码登录 1 密码登录
					islogincode:false,
					
					mobile: '',
					veri:'',
					password: '',
					lcodetxt:'',
				}
			}
		},
		mounted() {
			this.electron.ipcRenderer.send('minsize');
		},
		methods:{
			loginfun(){  // 登录
				let sendData = {
					mobile:this.formdata.mobile,
					sms_code:this.formdata.veri,
					password:this.formdata.password,
					login_type:this.formdata.isveritag // 0验证码登录 1 密码登录
				}
				if(!this.apifun.testphone.test(this.formdata.mobile) || this.formdata.mobile == ''){
					this.$message({
					  message: '手机号格式错误',
					  type: 'warning'
					});
					return false
				};
				this.apifun.$post('/pc/user/login',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						let datas = res.data;
						this.$store.commit('storeUsermsg',datas);
						localStorage.setItem('token',datas.pc_token)
						/* role_id:1管理员角色id、 2销售总监 3 售后总监 4财务 5客户 6销售 7设计经理 8设计师*/ 
						if(datas.role_id == 7 || datas.role_id == 8){  // 8设计师 7设计师经理
							this.formdata.islogincode = true;
							this.formdata.lcodetxt='';
						}else{
							this.$router.push('/home');
						}
					}
				})
			},
			lcodefun(){  // 发送登录码
				let sendData = {
					login_code : this.formdata.lcodetxt
				};
				this.apifun.$post('/pc/user/loginCode',sendData).then((res)=>{
					if(res.code ==  200){
						this.$router.push('/home');
					}
				})
			},
			vericlickfun(){  // 发送验证码
				let that = this;
				let flag = true;
				if (this.apifun.testphone.test(this.formdata.mobile) == false || this.formdata.mobile == '') {
					this.$message({
					  message: '手机号格式错误',
					  type: 'warning'
					});
					return false
				};
				if (flag) {
					flag = false;
					let index = 60;
					this.istime = true;
					let time = setInterval(()=>{
						if (index > 0) {
							--index;
							this.times = index;
						} else {
							index = 60;
							clearInterval(time)
							this.istime = false;
							flag = true;
						}
					}, 1000);
				};
				let sendData = {
					mobile: this.formdata.mobile,
					type:1
				};
				// 请求
				this.apifun.$post('/pc/user/sendSms',sendData).then((res)=>{
					// console.log(res)
					if(res.code ==  200){
						this.$message({
						  message: '发送成功',
						  type: 'success'
						});
					}
				})
			}
		}
	}
</script>
<style>
	#loginview .el-input__inner{
		background-color:#F6F6F6;
		border-color:#F6F6F6;
		height: 40px;
		line-height: 40px;
	}
	#loginview .el-input__inner:focus{
		border-color:#FF5E03;
	}
</style>
<style scoped lang="scss">
	.footerimg{
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 0;
		width:200px;
		height: 164px;
	}
	.logoactive{
		width: 90%;
		padding-top: 50px;
		.logoactive-logo{
			width: 150px;
			height: 50px;
			img{
				width: 150px;
				height: 50px;
			}
		}
	}
	.welcome{
		width: 90%;
		line-height:40px;
		font-size: 24px;
		font-weight: bold;
	}
	
	.taglogin{
		width: 90%;
		.tagloginmain{
			padding-top:35px;
		}
		.taglogineach{
			position: relative;
			font-size: 18px;
			color:#333333;
			line-height:30px;
			margin-right: 40px;
			.taglogineachtxt{
				font-weight: bold;
			}
			.taglogineachac{
				position: absolute;
				bottom:0px;
				left: 50%;
				width:50px;
				margin-left: -25px;
				height: 3px;
				border-radius: 3px;
			}
		}
	}
	.from{
		margin-top: 20px;
		.from-each{
			width: 90%;
			margin: 0 auto 20px;
			.from-eachinput{
				position: relative;
				height: 50px;
				line-height: 50px;
				color: #333;
				font-size: 16px;
				background-color:#F6F6F6;
				border: none;
				.el-input__inner{
					background-color:#F6F6F6 !important;
				}
				.veri{
					position: absolute;
					z-index: 10;
					right:0px;
					width: 120px;
					height: 41px;
					background-color:#F6F6F6;
					.verimain{
						width: 120px;
						height: 22px;
						line-height:22px;
						margin-top:9px;
						border-left: 1px solid #FF5E03;
						text-align: center;
						color:#FF5E03;
						font-size:16px;
					}
				}
			}
		}
	}
	.goregis{
		width: 90%;
		line-height:30px;
		font-size:18px;
		color:#333;
	}
	.btneach{
		width:90%;
		margin: 30px auto;
		.btnlogin{
			position: relative;
			z-index: 10;
			width:100%;
			height:48px;
			border: none;
			font-size: 18px;
			border-radius:10px;
			color: #fff;
		}
	}
	.findpass{
		width: 90%;
		line-height: 30px;
		text-align: center;
		font-size:18px;
	}
	// popup
	.popup{
		.popupbg{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			width: 100vw;
			height: 100vh;
			background-color: #333;
			opacity: .5;
		}
		.popupblock{
			position: fixed;
			left: 50%;
			top: 50%;
			z-index: 1000;
			width: 250px;
			height: 300px;
			margin-top: -135px;
			margin-left: -150px;
			background-color: #fff;
			padding: 30px;
			border-radius:5px;
			.lcodetitle{
				line-height: 40px;
				font-size: 18px;
				color: #333333;
				text-align: center;
			}
			.lcodedec{
				font-size: 14px;
				color: #333333;
				text-align: center;
			}
			.lcodemsg{
				height: 50px;
				line-height:50px;
				background-color: #F6F6F6;
				color: #333;
				font-size: 18px;
			}
			.locdebtn{
				width:100%;
				margin:110px auto 0;
				justify-content: space-between;
				.locdebtneach{
					width: 110px;
					height: 50px;
					line-height: 50px;
					text-align: center;
					color: #fff;
					font-size:18px;
					border-radius:10px;
				}
			}
			
		}
	}
</style>